<template>
  <div class="page">
    <div class="head">
      <h1>历史记录</h1>
    </div>
    <div class="panel" v-for="(item,index) in records" :key="index">
      <div class="entrust">
        <div class="title">
          <h4><span :class="item.oprateType ? 't-red' : 't-green'">{{item.oprateType ? '卖出' : '买入'}}</span>{{item.cName}}/HM</h4>
          <div>{{item.endStatus == 1 ? '已成交' : '已取消'}}</div>
        </div>
        <table>
          <tr>
            <th>时间</th>
            <th>委托价(HM)</th>
            <th>委托量({{item.cName}})</th>
          </tr>
          <tr>
            <td>{{item.createTime | shortTime}}</td>
            <td>{{item.postPrice}}</td>
            <td>{{item.num}}</td>
          </tr>
          <tr>
            <th>成交总额(HM)</th>
            <th>成交均价(HM)</th>
            <th>成交量({{item.cName}})</th>
          </tr>
          <tr>
            <td>{{item.amount}}</td>
            <td>{{item.averagePrice}}</td>
            <td>{{item.fixNum}}</td>
          </tr>
        </table>
      </div>
    </div>
    <infinite-loading @infinite="initData" ref="infiniteLoading">
      <span slot="no-more"></span>
      <div slot="no-results">
        <br>
        <empty></empty>
      </div>
      <spinner slot="spinner" type="lines"></spinner>
    </infinite-loading>
  </div>
</template>

<script>
  import {
    Spinner
  } from 'vux'
  import empty from './common/empty.vue'
  import InfiniteLoading from 'vue-infinite-loading';
  export default {
    components: {
      empty,
      InfiniteLoading,
      Spinner
    },
    data() {
      return {
        current: 1,
        records: []
      }
    },
    methods: {
      initData($state) {
        this.$http
          .post(`/exchangeOrder/finishlist`, {
            current: this.current
          })
          .then(res => {
            if (res.code == 200) {
              if (res.result.total > 0) {
                this.records = this.records.concat(res.result.records);
                $state.loaded();
                if (res.result.current < res.result.pages) {
                  this.current += 1;
                } else {
                  $state.complete();
                }
              } else {
                $state.complete();
              }
            } else {}
          })
          .catch(function(error) {});
      }
    },
  }
</script>

<style lang="scss" scoped>
  .entrust {
    &:not(:last-child) {
      border-bottom: 1px solid #eeeeee;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h4 {
        font-size: 16px;
        color: #333;
        span {
          margin-right: 5px;
        }
      }
      div {
        color: $link;
        font-size: 14px;
      }
    }
    table {
      width: 100%;
      th,
      td {
        text-align: left;
        font-weight: 300;
        font-size: 14px;
        &:last-child {
          text-align: right;
        }
      }
      th {
        color: #9b9b9b;
      }
      td {
        color: #353535;
      }
    }
  }
  .t-red {
    color: #ff0606;
  }
  .t-green {
    color: #13ce66;
  }
</style>
